import React, { Component } from 'react';
import { Collapse, Avatar, Row, Switch,Modal,InputNumber, Form, Input, DatePicker,Button } from 'antd';
import PropTypes from 'prop-types';
import ShareRecord from '../ShareRecord/ShareRecord';
import API from '../../../api/files/index';
import {message} from "antd/lib/index";
import {API_DOMAIN} from "../../../utils/constants";
import {connect} from "react-redux";
const QRCode = require('qrcode.react');
import { CopyToClipboard } from 'react-copy-to-clipboard';
const { Panel } = Collapse;
const { TextArea } = Input;
const ButtonGroup = Button.Group;
const FormItem = Form.Item;
class TabFileShare extends Component {
  constructor (props) {
    super(props);
    this.state = {
      file: props.file,
      shares: [],
      sharesPanel: [],
      shareList: [],
      visibleOfQRCode: false,
      selectedShareURL: {},
      visibleOfEdit:false,
      visiblButton:true,
    };
  }

  switchValid =  async (share)  => {

      const { id } = share;
      const { valid } = share.link;
      // const params = {
      //     shareId: id,
      //     valid: !valid,
      // };
      // const response = await API.modifyShare(params);
      // const { code } = response;
      // if (code === 1) {
      //     message.success('操作成功');
      //     this.getShareList();
      //     }
      // }
  }

    toggleQRCode = (id) => {
        this.setState({
            selectedShareURL: `${API_DOMAIN}/wechat/auth.htm?shareId=${id}&sharedBy=null`,
            visibleOfQRCode: true,
        });
    }

    getShareList = async () => {
        const response = await API.getShareList({ nickname: '', s: '' });
        const { code, data } = response;
        if (code === 1) {
            this.setState({
                shareList: data,
            });
            this.getShareListOfSpecifiedFile();
        }
    }

    handleCopy = (text, result) => {
        if (result) {
            message.success('复制成功');
        }
    }


    editShare = (id) =>{
        this.setState({
            visibleOfEdit: true,
            visiblButton:false,
        });
        this.getShareListOfSpecifiedFile();
    }

    cancelEditShare = (id) =>{
        this.setState({
            visibleOfEdit: false,
            visiblButton:true,
        });
        this.getShareListOfSpecifiedFile();
    }

    handleDeleteShare = async (shareId) => {
        const response = await API.deleteShare(shareId);
        const { code } = response;
        if (code === 1) {
            message.success('删除成功');
            this.getShareListOfSpecifiedFile();
        }
    }


  getShareListOfSpecifiedFile = async () => {
    const { id } = this.state.file;
    const params = {
      s: id,
    };
    const response = await API.getShareListOfSpecifiedFile(params);
    const { code, data } = response;
    if (code === 1) {
      this.props.callback({ count: data.length });
      const sharesPanel = [];
      data.forEach((share) => {
        const ele = (
          <Panel
            header={
              <span>
                 <Avatar src={share.recipient.avatar} />
                <span style={{marginLeft: 8}}>{share.recipient.nickname}</span>
                   <Switch style={{ float: 'right', marginRight: 50 }}
                       checked={share.link.valid}
                       // onChange={() => this.switchValid(share)}
                   />
                  {share.link.valid== true? <span  style={{ float: 'right', marginRight: 11 }}>分享链接</span>:
                      <span  style={{ float: 'right', marginRight: 11,color:'#FF0000'}}>链接已失效</span>}

              </span>
            }
            key={share.id}
          >
                  <Row style={{position: 'relative'}} >
                      <ShareRecord share={share} visibleOfEdit={this.state.visibleOfEdit} getShareList={this.cancelEditShare}/>
                      { this.state.visiblButton?
                          <div style={{position: 'absolute', right: 20, top: 10}}>
                              <ButtonGroup >
                                  <Button style={{padding:0}}><CopyToClipboard onCopy={this.handleCopy} text={`${API_DOMAIN}/wechat/auth.htm?shareId=${share.id}&sharedBy=null`}>
                                      <img className="imgSpan" src="/images/icon_copy_link.png" alt=""/></CopyToClipboard>
                                  </Button>
                                  <Button style={{padding:0}} onClick={() => this.editShare(share.id)}><img className="imgSpan" src="/images/icon_permission_settings.png" alt=""/></Button>
                                  <Button style={{padding:0}} onClick={() => this.toggleQRCode(share.id)}><img className="imgSpan" src="/images/icon_twodimensional code.png" alt=""/></Button>
                                  <Button style={{padding:0}} onClick={() => this.handleDeleteShare(share.id)}><img className="imgSpan" src="/images/icon_delete_share.png" alt=""/></Button>
                              </ButtonGroup>
                          </div>:null
                      }

                  </Row>
          </Panel>
        );
        sharesPanel.push(ele);
      });
      this.setState({
        sharesPanel,
      });
      this.setState({
        shares: data,
      });
    }
  }

  componentDidMount () {
    this.getShareListOfSpecifiedFile();
  }

  render () {
      const { style } = this.props; //eslint-disable-line
    return (
      <div style={style}>
          <Modal
              width={176}
              closable={false}
              destroyOnClose
              visible={this.state.visibleOfQRCode}
              footer={null}
              onCancel={() => { this.setState({ visibleOfQRCode: false }); }}
          >
              <QRCode value={this.state.selectedShareURL} />
          </Modal>

          {
          this.state.shares.length ?
          (

          <Collapse id="collaClss"
          destroyInactivePanel
          bordered={false}
          >
          {this.state.sharesPanel}
          </Collapse>
          ) : ''
          }
      </div>
    );
  }
}

TabFileShare.propTypes = {
  file: PropTypes.object.isRequired,
  callback: PropTypes.func.isRequired,
};

export default TabFileShare;
